<template>
	<div class="category">
		<!-- 1.0导航栏 -->
		<van-nav-bar title="栏目管理" @click-left="$router.back()" fixed placeholder>
			<!-- 导航栏——左侧标签 -->
			<template #left>
				<i class="iconfont icon-zuojiantou"></i>
				<div class="logo">
					<i class="iconfont icon-N"></i>
					<i class="iconfont icon-E"></i>
					<i class="iconfont icon-W"></i>
				</div>
			</template>
		</van-nav-bar>
		
		<!-- 已关注栏目 -->
		<div class="group">
			<h3 class="title">已关注栏目</h3>
			<p class="desc">点击删除以下栏目</p>
			<div class="list">
				<span @click="remove(item)" class="item" v-for="item in followList" :key="item.id">{{item.name}}</span>

			</div>
		</div>
		
		<!-- 未关注栏目 -->
		<div class="group unfollow">
			<h3 class="title">未关注栏目</h3>
			<p class="desc">点击添加以下栏目</p>
			<div class="list">
				<span @click="addFn(item)" class="item" v-for="item in unfollowList " :key="item.id">{{item.name}}</span>
			</div>
		</div>
	
	</div>
</template>

<script>
	import { getCategoryAPI } from '../apis/category.js'
	import { getToken , setCate , getCate , setUnCate , getUnCate  } from '../utils/localData.js'
	export default {
		data (){
			return {
				followList: getCate() || [],
				unfollowList: getUnCate() || []
			}
			
		},
		
		
		async created() {
			if((this.followList && this.unfollowList).length === 0){
				const res = await getCategoryAPI();
				if(getToken()){
					/* 注意splice的返回值 */
					res.data.data.splice(0 , 2);
					this.followList = res.data.data;
					console.log(this.followList);
				}else{
					res.data.data.splice(0 , 1);
					this.followList = res.data.data;
				}
			}
		},
		
		methods: {
			remove(Theitem){
				if(this.followList.length === 1){
					this.$toast("请至少关注一个栏目")
				}else{
					this.followList = this.followList.filter((item) => item.id !== Theitem.id)
					this.unfollowList.unshift(Theitem);
				}
			},
			
			addFn(Theitem){
				this.unfollowList = this.unfollowList.filter((item) => item.id !== Theitem.id)
				this.followList.push(Theitem);
			}
		},
		
		watch: {
			followList() {
				setCate(this.followList);
				setUnCate(this.unfollowList);
			}
		}
	}
</script>

<style lang="less" scoped>
	.van-nav-bar {
		.logo {
			width: 20px;
			i{
				font-size: 15px;
				color: #19a9fc;
			}
		}
		.icon-zuojiantou {
			font-size: 20px;
			color: #19a9fc;

		}
	}
	
	
	.unfollow{
		
		.title{
			color: #ff5500!important;
		}
	}
	.group{
		padding: 10px;
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
		.title{
			font-size: 18px;
			color: #19a9fc;
			font-weight: bold;
			text-align: center;
		}
		.desc{
			margin-top: 15px;
			font-size: 12px;
			color: #8c8c8c;
		}
		
		
		.list{
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 15px;
				width: 20%;
				height: 30px;
				margin: 8.8px;
				box-sizing: border-box;
				background-color: #f4f2f2;
				color: #434343;
				border: 1px solid #cccccc;
			}
		}
	}
</style>
